<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>解构赋值</title>
</head>
<body>
    <script>
        console.log([4,2][0]);
        let [foo=1] = [];
        console.log('foo',1);
       // let [x,y=3]=[0];
      //  console.log(x,y);
        
       let {a,b}={b:1,a:2};
       console.log(a,b);
       
       //对象的解构赋值，可以很方便地将现有对象的方法，赋值到某个变量。
       const {log} = console;
       log('hello');
       //对象的解构赋值的内部机制，是先找到同名属性，然后再赋给对应的变量。真正被赋值的是后者，而不是前者。
       let {foo:baz}={foo:'aaa'};
       console.log('foo的值',foo);
       console.log('baz的值',baz);
       
       let obj = {
  p: [
    'Hello',
    { y: 'World' }
  ]
};
let { p, p: [x, { y }] } = obj;
//x // "Hello"
//y // "World"
console.log('p的值',p);
 // ["Hello", {y: "World"}]

 //申明的变量，在代码块中进行解构赋值必须使用圆括号。
 let f;
 ({f}={f:1});
 console.log('f的值',f);
 
//字符串的解构赋值
const [a1,b1,c,d,e,] = 'hello';
console.log('a1 b1',a1,b1,c,d,e);

let {toString: s} = 123;
// s === Number.prototype.toString // true
console.log('s的值',s);

 let a2 = [[1,2],[3,5]].map(([a,b])=>a+b);
 console.log('a2',a2);
 
 //函数参数的解构也可以使用默认值。
function move({x1=1,y1=2}={}){
    return [x1,y1];
 }

 console.log('move的值', move({x1:3,y1:4}));
 console.log('move的值', move({}));

 //undefined就会触发函数参数的默认值。
 let a3 = [1,undefined,3].map((x='yes')=>x);
 console.log('a3',a3);

 //用途，交换变量的值
 let x3=1;
 let y3=2;
 [x3,y3]=[y3,x3];
 console.log(x3,y3);
 
 //从函数返回多个值

 function arr1(){
    return [1,2,3,4,5];
 }

 let [a4,b4,c4,d4,e4]=arr1();
 console.log('a4',a4,b4,c4,d4,e4);
 
//解构赋值对提取 JSON 对象中的数据，尤其有用。
let jsonData = {
  id: 42,
  status: "OK",
  data: [867, 5309]
};
let { id, status, data: number } = jsonData;
console.log(id, status, number);
// 42, "OK", [867, 5309]
 
//加载模块时，往往需要指定输入哪些方法。解构赋值使得输入语句非常清晰。

const { SourceMapConsumer, SourceNode } = require("source-map");



    </script>
</body>
</html>